<template lang="pug">
div
  nav-div
  table.ui.table
    thead
      tr
        th ID
        th 标题
        th 编辑者
        th 封面
        th 创建时间
        th 排序值
        th 显示状态
        th(colspan="3" style="text-align:center") 操作
    tbody
        tr(v-for="article in articles ")
          td {{article.id}}
          td {{article.title}}
          td {{article.author}}
          td 
             .img-style
               img(v-bind:src='article.image')
          td {{moment(article.created_at).format('YYYY-MM-DD HH:mm:ss') }}
          td {{article.order_index}}
          td {{article.hidden ? '显示' : '隐藏'}}
          td
             a(v-link="{ name: 'show',path: 'article', params: { id: article.id} }", target="_blank") 查看
          td
             a(v-link="{ name: 'new',path: 'articles', params: { id: article.id} }", target="_blank") 编辑
          td
            .ui.button(@click="delete_id(article.id)") 删除 
</template>

<script>
import { getArticles,deleteArticle} from '../../vuex/action'
import NavDiv from '../../modules/nav'

export default {
  name: 'index',
  components: {
    NavDiv,
  },
  vuex: {
    getters: {
      articlesSource: ({ article }) => article.articles,
      articleSource: ({ article }) => article.article,
    },
    actions: {
      getArticles,
      deleteArticle
    }
  },
  data () {
    return {
      articles: [],
      article: {}
    }
  },
  ready () {
    this.load()
  },
  methods: {
    load(){
      catchError(async () => {
        await this.getArticles()
      })
    },
    delete_id(id) {
      catchError(async () => {
        await this.deleteArticle({id: id})
        this.load()
      }, '删除成功')
    },
  },
  watch: {
    articlesSource: {
      handler (val, old) {
        console.log(val)
        this.articles = _.cloneDeep(val)
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style  scoped>
  .img-style img {
    height: 60px;
    width: 50px;
  }
</style>
